<template>
  <div class="warpper">
      <el-button @click="checkPromise" type="primary" class="content_title">异步操作但是没有先后</el-button>
      <el-button @click="testP" type="primary" class="content_title">异步操作返回成功和失败值</el-button>
      <el-button @click="testPP" type="primary" class="content_title">异步操作返回成功和失败值2</el-button>
  </div>
</template>

<script>
import toufangtime from '../common/toufangtime'
export default {
  components: {
    toufangtime
  },
  name: 'tneworder',
  props: {
    msg: String
  },
  data () {
    return {
      aaa: 3
    }
  },
  created () {
  },
  methods: {
    checkPromise () {
      this.getUserPromise(this.getUserName(), this.getUser())
        .then(data => {
          // 这里的data就是包含了getUserName 和 getUser返回值所组成的数组
          console.log(data) // [ 'superman', { id: 1, username: 'superman', gender: 'male' } ]
        })
    },
    getUserPromise (promiseX, promiseY) {
      return Promise.all([promiseX, promiseY])
        .then(values =>
          values
        )
    },
    getUserName () {
      let data = 'superman'
      console.log(1)
      return new Promise((resolve, reject) => {
        setTimeout(function () {
          resolve(data)
          console.log(data)
        }, 4000)
      })
    },
    getUser () {
      let data = {
        id: 1,
        username: 'superman',
        gender: 'male'
      }
      console.log(2)
      return new Promise((resolve, reject) => {
        setTimeout(function () {
          resolve(data)
          console.log(data)
        }, 5000)
      })
    },
    test (resolve, reject) {
      let timeOut = Math.random() * 2
      console.log('set timeout to: ' + timeOut + ' seconds.')
      setTimeout(function () {
        if (timeOut < 1) {
          console.log('call resolve()...')
          resolve('200 OK')
        } else {
          console.log('call reject()...')
          reject('timeout in ' + timeOut + ' seconds.')
        }
      }, timeOut * 1000)
    },
    testP () {
      new Promise(this.test).then((result) => {
        alert(this.aaa)
        console.log('成功：' + result)
      }).catch((reason) => {
        console.log('失败：' + reason)
      })
    },
    runAsync1 () {
      let timeOut = Math.random() * 2
      console.log(timeOut, 1)
      var p = new Promise(function (resolve, reject) {
        // 做一些异步操作
        setTimeout(function () {
          if (timeOut < 1) {
            console.log('异步任务1执行完成' + timeOut)
            resolve('随便什么数据1' + timeOut)
          } else {
            console.log('failed异步任务1执行完成')
            reject(new Error('failed随便什么数据1'))
          }
        }, 1000)
      })
      return p
    },
    runAsync2 (data) {
      let timeOut = Math.random() * 2
      console.log(timeOut, 2)
      var p = new Promise(function (resolve, reject) {
        // 做一些异步操作
        setTimeout(function () {
          if (timeOut < 1.6) {
            console.log('异步任务2执行完成' + timeOut + data)
            resolve('随便什么数据2' + timeOut + data)
          } else {
            console.log('failed异步任务2执行完成')
            reject(new Error('failed随便什么数据2'))
          }
        }, 2000)
      })
      return p
    },
    runAsync3 (data) {
      let timeOut = Math.random() * 2
      console.log(timeOut, 3)
      var p = new Promise(function (resolve, reject) {
        // 做一些异步操作
        setTimeout(function () {
          if (timeOut < 1.6) {
            console.log('异步任务3执行完成' + timeOut + data)
            resolve('随便什么数据3' + timeOut + data)
          } else {
            console.log('failed异步任务3执行完成')
            reject(new Error('failed随便什么数据3'))
          }
        }, 3000)
      })
      return p
    },
    testPP () {
      this.runAsync1().then((data) => {
        console.log(data, 'suc1')
        return this.runAsync2(data)
      }).then((data) => {
        console.log(data, 'suc2')
        return this.runAsync3(data)
      }).catch((reason) => {
        console.log(reason, 'fail')
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.cell
  text-align left
.warpper
  .head_function
    margin 20px 0
    text-align left
  .addActivity
   width 800px
   text-align left
   .content_title
    width 100%
    background rgba(210,210,210,0.2)
    color #4c4743
    height 32px
    line-height 32px
    padding-left 20px
</style>
